<template>
  <div class="user-info-modal" :class="{ 'active': showModal }">
    <div class="user-info-modal-content">
      <div class="title">
        <div>
          <avatar v-if="user.avatar!==null" size="40" shape="square" :url="user.avatar"></avatar>
          <avatar v-else size="40" shape="square" ></avatar>
        </div>
        <div class="nameandword">
          <div class="username">用户名：<span>{{user.username}}</span></div>
          <div class="word">正在背：<span>{{user.lastword}}</span></div>
        </div>
        <div class="status">
          <!-- 没有关系的情况 -->
          <div class="addFollow" @click="addfollow()" v-if="status===0">
            <i class="iconfont">&#xe613;</i>
            <span>添加关注</span>
          </div>
          <!-- 这是你本人的card -->
          <div v-else-if="status===1">
            <i class="iconfont">&#xe7b2;</i>
            <span>本人</span>
          </div>
          <div class="deleteFollow" @click="deletefollow()" v-else-if="status===2">
            <i class="iconfont">&#xe608;</i>
            <span>互相关注</span>
          </div>
          <!-- 你关注了他他没有关注你 -->
          <div class="deleteFollow" @click="deletefollow()"  v-else-if="status===3">
            <i class="iconfont">&#xe614;</i>
            <span>你的关注</span>
          </div>
          <!-- 他关注了你你没有关注他 -->
          <div class="addFollow" @click="addfollow()" v-else-if="status===4">
            <i class="iconfont">&#xe613;</i>
            <span>你的粉丝</span>
          </div>
        </div>
      </div>
      <div class="user-info-modal-body">
        <div class="scoreandsocial">
          <div class="score">
            词力得分：<span>{{user.sumscore}}</span>
          </div>
          <div class="social">
            粉丝：{{ user.fans.length }}
            关注：{{ user.follow.length }}
            朋友: {{ user.friends.length }}
          </div>
        </div>
      </div>
      <button class="close" @click="$emit('close')">×</button>
    </div>
  </div>
</template>

<script>
import store from '@/store'
// 调用请求用户基本信息的用户接口 调用添加关注接口 调用获取本人基本信息从而更新vuex 取消关注接口
import { getUsercard, addFollow, getUserInfo, deleteFollow } from '@/api/user'
// 调用头像组件
import avatar from '@/components/library/avatar.vue'
// 调用消息提示组件
import popmessage from '@/components/library/message'
export default {
  name: 'user-dialog',
  props: {
    showModal: {
      type: Boolean,
      required: true
    },
    userid: {
      type: Number,
      required: true
    }
  },
  components: {
    avatar
  },
  data () {
    return {
      // 单词卡片上的人的用户信息
      user: {
        username: 'jim',
        lastword: '测试词表',
        sumscore: 999,
        follow: [],
        fans: [],
        friends: []
      },
      // 我的信息判断这人和我什么关系
      profile: {
        follows: [],
        fans: [],
        friends: []
      },
      status: 0
    }
  },
  methods: {
    // 刷新该组件的数据状态
    refreshState () {
      getUsercard({ id: this.userid }).then((res) => {
        // console.log(res.data)
        this.user = res.data
        this.user.follow = JSON.parse(this.user.follow)
        this.user.fans = JSON.parse(this.user.fans)
        this.user.friends = JSON.parse(this.user.friends)
      })
      // 判断这条评论主人是不是自己
      if (this.userid === this.profile.id) {
        this.status = 1
      } else if (this.profile.friends.indexOf(this.userid) !== -1) {
        // 看看是不是互关的朋友
        this.status = 2
      } else if (this.profile.follow.indexOf(this.userid) !== -1) {
        // 你关注了他他没有关注你
        this.status = 3
      } else if (this.profile.fans.indexOf(this.userid) !== -1) {
        // 他关注里你你没有关注他
        this.status = 4
      } else {
        this.status = 0
      }
    },
    // 添加用户关注
    addfollow () {
      addFollow({ targetid: this.userid }).then((res) => {
        if (res.data.status === 0) {
          popmessage({ type: 'success', str: res.data.message })
          // 刷新vuex内数据的状态 以及这个用户卡的状态
          getUserInfo().then(res => {
            // console.log(res)
            this.profile = res.data
            this.profile.follow = JSON.parse(this.profile.follow)
            this.profile.fans = JSON.parse(this.profile.fans)
            this.profile.friends = JSON.parse(this.profile.friends)
            const { follow, fans, friends } = res.data
            store.commit('user/updatestate', { follow, fans, friends })
            this.refreshState()
          })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    },
    // 取消用户关注
    deletefollow () {
      deleteFollow({ targetid: this.userid }).then((res) => {
        if (res.data.status === 0) {
          popmessage({ type: 'success', str: res.data.message })
          // 刷新vuex内数据的状态 以及这个用户卡的数据
          getUserInfo().then(res => {
            // console.log(res)
            this.profile = res.data
            this.profile.follow = JSON.parse(this.profile.follow)
            this.profile.fans = JSON.parse(this.profile.fans)
            this.profile.friends = JSON.parse(this.profile.friends)
            const { follow, fans, friends } = res.data
            store.commit('user/updatestate', { follow, fans, friends })
            this.refreshState()
          })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    }
  },
  watch: {
    // 换头像点击了就请求接口获取用户基本信息
    userid (newval, oldval) {
      // console.log(newval)
      getUsercard({ id: newval }).then((res) => {
        // console.log(res.data)
        this.user = res.data
        this.user.follow = JSON.parse(this.user.follow)
        this.user.fans = JSON.parse(this.user.fans)
        this.user.friends = JSON.parse(this.user.friends)
      })
      // 判断这条评论主人是不是自己
      if (newval === this.profile.id) {
        this.status = 1
      } else if (this.profile.friends.indexOf(newval) !== -1) {
        // 看看是不是互关的朋友
        this.status = 2
      } else if (this.profile.follow.indexOf(newval) !== -1) {
        // 你关注了他他没有关注你
        this.status = 3
      } else if (this.profile.fans.indexOf(newval) !== -1) {
        // 他关注里你你没有关注他
        this.status = 4
      } else {
        this.status = 0
      }
    }
  },
  created () {
    this.profile = store.state.user.profile
  }
}
</script>

<style scoped lang="less">
.user-info-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.user-info-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-info-modal-content {
  position: relative;
  background-color: rgb(215, 215, 215);
  border-radius: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  width: 400px;
  padding: 20px;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out;
}

.title {
  height: 40px;
  line-height: 40px;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  .nameandword{
    margin-left: 10px;
    text-align: left;
    .username{
      height: 20px;
      line-height: 20px;
      span{
        font-family: '钉钉进步体';
        color: #3e87e5;
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .word{
      height: 20px;
      line-height: 20px;
      span{
        font-family: '钉钉进步体';
        color: #3e87e5;
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .status{
    margin-left: 60px;
    //添加关注
    .addFollow{
      .iconfont{
        cursor: pointer;
      }
      span{
        padding-left: 10px;
        color: #979797;
      }
    }
    .deleteFollow{
      .iconfont{
        cursor: pointer;
      }
      span{
        padding-left: 10px;
        color: #979797;
      }
    }
  }
  .scoreandsocial{
    margin-left: 20px;
    text-align: left;
    .score{
      height: 20px;
      line-height: 20px;
      span{
        font-family: '钉钉进步体';
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .social{
      height: 20px;
      line-height: 20px;
      span{
        font-family: '钉钉进步体';
        color: #3e87e5;
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

}
.user-info-modal-header h3 {
  margin: 0;
}

.user-info-modal-body {
  height: 40px;
  text-align: center;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  font-size: 24px;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.close:hover {
  transform: scale(1.2);
  color: #f44336;
}
</style>
